<template>
	<t-tabs class="bg-white h-full w-full" :value="defaultValue" @change="onChange" placement="left">
		<!-- 申请调休 -->
		<t-tab-panel :value="tabPanel1" label="申请调休">
			<t-form :data="restData" class="p-8" @reset="restReset" @submit="applyRestSubmit" :rules="restRules" labelAlign="top" name="restData">
				<t-form-item name="start_date" label="调休日期">
					<t-date-range-picker
					placeholder="请选择调休日期"
					:disable-date="{before: today}"
					@change="restDateChange"
					></t-date-range-picker>
				</t-form-item>
				<div class="mt-8" style="width: 42rem;">
					<t-form-item name="reason" label="事由">
						<t-textarea
						v-model="restData.reason"
						class="w-full"
						placeholder="请输入调休理由或备注"
						></t-textarea>
					</t-form-item>
				</div>
				<div class="w-80 mt-8">
					<t-form-item name="approver_id" label="审核人">
						<t-select 
						v-model="restData.approver_id"
						class="w-full"
						placeholder="请选择审批人"
						:options="approverIdOptions"
						></t-select>
					</t-form-item>
				</div>
				<div class="flex mt-8">
					<t-button theme="default" type="reset">重置</t-button>
					<t-button class="ml-4" type="submit">立即申请</t-button>
				</div>
			</t-form>
		</t-tab-panel>
		<!-- 申请加班 -->
		<t-tab-panel :value="tabPanel2" label="申请加班">
			<t-form :data="overTimeData" class="p-8" @reset="overTimeReset" @submit="overTimeSubmit" :rules="overTimeRules" labelAlign="top" name="overTimeData">
				<div class="flex">
					<div class="w-80">
						<t-form-item name="overtime_date" label="加班日期">
							<t-date-picker
							v-model="overTimeData.overtime_date"
							class="w-full"
							placeholder="请选择加班日期"
							:disable-date="{
								after: today
							}"
							></t-date-picker>
						</t-form-item>
					</div>
					<div class="ml-8">
						<t-form-item name="overtime_hour" label="加班小时">
							<t-input-number
							v-model="overTimeData.overtime_hour"
							class="w-full"
							placeholder="请输入加班了多久"
							></t-input-number>
						</t-form-item>
					</div>
				</div>
				<div class="mt-8" style="width: 42rem;">
					<t-form-item name="reason" label="事由">
						<t-textarea
						v-model="overTimeData.reason"
						class="w-full"
						placeholder="请输入调休理由或备注"
						></t-textarea>
					</t-form-item>
				</div>
				<div class="w-80 mt-8">
					<t-form-item name="approver_id" label="审核人">
						<t-select 
						v-model="overTimeData.approver_id"
						class="w-full"
						placeholder="请选择审批人"
						:options="approverIdOptions"
						></t-select>
					</t-form-item>
				</div>
				<div class="flex mt-8">
					<t-button theme="default" type="reset">重置</t-button>
					<t-button class="ml-4" type="submit">立即申请</t-button>
				</div>
			</t-form>
		</t-tab-panel>
		<!-- 申请历史 -->
		<t-tab-panel :value="tabPanel3" label="申请记录">
			<t-tabs :value="tabListValue" v-if="defaultValue === tabPanel3" :onChange="tabListChange">
				<t-tab-panel value="调休申请记录" label="调休申请记录">
					<div v-for="(item, index) in restLogData" :key="item.rl_id" class="hover:bg-gray-50">
						<h5 :class="logClass(item)">{{restTitle(item)}}</h5>
						<div class="flex pl-4 pt-2">
							<div class="text-gray-400 mr-2 text-right">
								<p class="pb-2">开始时间：</p>
								<p class="pb-2">结束时间：</p>
							</div>
							<div class="w-40">
								<p class="pb-2">{{item.start_date}}</p>
								<p>{{item.end_date}}</p>
							</div>
							<div class="text-gray-400 mr-2 text-right">
								<p class="pb-2">审批人：</p>
								<p>申请时间：</p>
							</div>
							<div>
								<p class="pb-2">{{item.approver_name}}</p>
								<p>{{item.proposer_date}}</p>
							</div>
						</div>
						<p class="pl-4 pb-4"><span class="text-gray-400 mr-2">调休事由：</span><span>{{item.reason}}</span></p>
						<t-divider class="m-0"></t-divider>
					</div>
				</t-tab-panel>
				<t-tab-panel value="加班申请记录" label="加班申请记录">
					<div v-for="(item, index) in overTimeLogData" :key="item.ol_id" class="hover:bg-gray-50">
						<h5 :class="logClass(item)">{{overTimeTitle(item)}}</h5>
						<div class="flex pl-4 pt-2">
							<div class="text-gray-400 mr-2 text-right">
								<p class="pb-2">加班日期：</p>
								<p class="pb-2">加班时长：</p>
							</div>
							<div class="w-40">
								<p class="pb-2">{{item.overtime_date}}</p>
								<p>{{item.overtime_hour}}小时</p>
							</div>
							<div class="text-gray-400 mr-2 text-right">
								<p class="pb-2">审批人：</p>
								<p>申请时间：</p>
							</div>
							<div>
								<p class="pb-2">{{item.approver_name}}</p>
								<p>{{item.proposer_date}}</p>
							</div>
						</div>
						<p class="pl-4 pb-8"><span class="text-gray-400 mr-2">加班事由：</span><span>{{item.reason}}</span></p>
						<t-divider class="m-0"></t-divider>
					</div>
				</t-tab-panel>
			</t-tabs>
		</t-tab-panel>
	</t-tabs>
</template>

<script>
	import dayjs from 'dayjs'
	import { getUserId } from '@/unit/auth';
	
	export default {
		name: 'LeaveWork',
		data() {
			return {
				restData: {
					start_date: '',
					end_date: '',
					reason: '',
					approver_id: '',
					proposer_id: getUserId(),
					proposer_date: dayjs().format('YYYY-MM-DD')
				},
				approverIdOptions: [],
				restRules: {
					start_date: [{required: true, message: '调休日期必填', type: 'error'}],
					end_date: [{required: true, message: '调休日期必填', type: 'error'}],
					approver_id: [{required: true, message: '审核人必选', type: 'error'}]
				},
				overTimeData: {
					overtime_date: '',
					overtime_hour: '',
					reason: '',
					approver_id: '',
					proposer_id: getUserId(),
					proposer_date: dayjs().format('YYYY-MM-DD')
				},
				overTimeRules: {
					overtime_date: [{required: true, message: '加班日期必填', type: 'error'}],
					overtime_hour: [{required: true, message: '加班小时必填', type: 'error'}],
					approver_id: [{required: true, message: '审核人必选', type: 'error'}]
				},
				restLogData: [],
				overTimeLogData: [],
				defaultValue: 1,
				tabPanel1: 1,
				tabPanel2: 2,
				tabPanel3: 3,
				tabListValue: '调休申请记录',
				today: dayjs().format('YYYY-MM-DD')
			}
		},
		computed: {
			yesterday(){
				return dayjs(new Date(this.restData.start_date).getTime() - 86400000).format('YYYY-MM-DD')
			}
		},
		methods: {
			// 周日期改变
			restDateChange(value, context){
				this.restData.start_date = value[0]
				this.restData.end_date = value[1]
			},
			// 历史tab栏改变时
			tabListChange(val){
				this.tabListValue = val
			},
			// tab栏改变时
			onChange(val){
				this.defaultValue = val
				if(val != 3){
					const query = { type: val }
					this.getExamineUserList(query)
				}
			},
			// 加班样式
			logClass(item){
				if(item.proposer_state == 0){return 'pt-4 pl-4 text-base text-gray-400'}
				if(item.proposer_state == 1){return 'pt-4 pl-4 text-base text-blue-700'}
				if(item.proposer_state == 2){return 'pt-4 pl-4 text-base text-red-500'}
			},
			// 加班审核状态判断
			overTimeTitle(item){
				if(item.proposer_state == 0){return '您的加班申请正在审核中...'}
				if(item.proposer_state == 1){return '您的加班申请已通过'}
				if(item.proposer_state == 2){return '您的加班申请被驳回'}
			},
			// 调休审核状态判断
			restTitle(item){
				if(item.proposer_state == 0){return '您的调休申请正在审核中...'}
				if(item.proposer_state == 1){return '您的调休申请已通过'}
				if(item.proposer_state == 2){return '您的调休申请被驳回'}
			},
			// 获取加班申请
			getOvertimeLog(){
				const user_id = getUserId()
				this.$store.dispatch('attendance/getOvertimeLog', user_id).then(res => {
					if(res.status === 0){
						this.overTimeLogData = []
						for(let i = 0 ; i < res.data.length ; i++){
							this.overTimeLogData.push(res.data[i])
						}
						// 对 overTimeLogData 排序
						const compare = function (obj1, obj2) {
							let val1 = obj1.ol_id;
							let val2 = obj2.ol_id;
							if (val1 > val2) {
								return -1;
							} else if (val1 < val2) {
								return 1;
							} else {
								return 0;
							}
						}
						this.overTimeLogData.sort(compare)
					}
				})
			},
			// 获取调休申请
			getRestLog(){
				const user_id = getUserId()
				this.$store.dispatch('attendance/getRestLog', user_id).then(res => {
					if(res.status == 0){
						this.restLogData = []
						for(let i = 0 ; i < res.data.length ; i++){
							this.restLogData.push(res.data[i])
						}
						// 对 overTimeLogData 排序
						const compare = function (obj1, obj2) {
							let val1 = obj1.rl_id;
							let val2 = obj2.rl_id;
							if (val1 > val2) {
								return -1;
							} else if (val1 < val2) {
								return 1;
							} else {
								return 0;
							}
						}
						this.restLogData.sort(compare)
					}
				})
			},
			// 申请加班表单重置
			overTimeReset(){
				this.$message.success('重置成功');
			},
			// 申请加班提交
			overTimeSubmit({ validateResult, firstError }){
				if (validateResult === true) {
					if(!this.overTimeData.reason){
						delete this.overTimeData.reason
					}
					this.$store.dispatch('attendance/applyOvertime', this.overTimeData).then(res => {
						if(res.status === 0){
							this.$message.success(res.message)
							this.getOvertimeLog()
							this.defaultValue = this.tabPanel3
							this.tabListValue = '加班申请记录'
							const query = { user_id: getUserId() }
							this.$store.dispatch('user/getReddot', query)
						} else {
							this.$message.error(res.message)
						}
					})
				} else {
					this.$message.warning(firstError);
				}
			},
			// 申请调休表单重置
			restReset() {
				this.$message.success('重置成功');
			},
			// 申请调休
			applyRestSubmit({ validateResult, firstError }){
				if (validateResult === true) {
					if(!this.restData.reason){
						delete this.restData.reason
					}
					this.$store.dispatch('attendance/applyRest', this.restData).then(res => {
						if(res.status === 0){
							this.$message.success(res.message)
							this.getRestLog()
							this.defaultValue = this.tabPanel3
							const query = { user_id: getUserId() }
							this.$store.dispatch('user/getReddot', query)
						} else {
							this.$message.error(res.message)
						}
					})
				} else {
					this.$message.warning(firstError);
				}
			},
			// 获取审批人列表
			getExamineUserList(query){
				this.$store.dispatch('attendance/getExamineUserList', query).then(res => {
					this.approverIdOptions = []
					if(res.status === 0){
						for(let i = 0 ; i < res.data.length ; i++){
							this.approverIdOptions[i] = {}
							this.approverIdOptions[i].value = res.data[i].id
							this.approverIdOptions[i].label = res.data[i].nick_name
						}
					} else {
						this.$message.error(res.message)
					}
				})
			}
		},
		created() {
			const query = { type: 1 }
			this.getExamineUserList(query)
			this.getRestLog()
			this.getOvertimeLog()
		}
	}
</script>

<style>
</style>